<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>注册 - 加入留言板社区</title>
    <link rel="stylesheet" href="../css/style.css">
    <style>
        .form-container {
            max-width: 400px;
            margin: 50px auto;
            background: white;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        .form-title {
            text-align: center;
            margin-bottom: 30px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }
        .form-group input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 1rem;
        }
        .form-error {
            color: #e74c3c;
            margin-top: 5px;
            font-size: 0.9rem;
        }
        .form-footer {
            text-align: center;
            margin-top: 20px;
            font-size: 0.9rem;
        }
        .password-match {
            color: #2ecc71;
        }
        .password-mismatch {
            color: #e74c3c;
        }
    </style>
</head>
<body>
<div class="form-container">
    <h1 class="form-title">留言板系统注册新账号</h1>

    <c:if test="${not empty requestScope.error}">
        <div class="form-error">${requestScope.error}</div>
    </c:if>

    <form action="register" method="post" onsubmit="return validatePasswords()">
        <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" id="username" name="username" placeholder="请设置用户名" required>
        </div>

        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" id="password" name="password" placeholder="请设置密码" required>
        </div>

        <div class="form-group">
            <label for="confirmPassword">确认密码</label>
            <input type="password" id="confirmPassword" name="confirmPassword" placeholder="请再次输入密码" required>
            <div id="passwordMatchMessage" class="form-error"></div>
        </div>

        <div class="form-group">
            <label for="email">邮箱</label>
            <input type="email" id="email" name="email" placeholder="请输入邮箱" required>
        </div>

        <div class="form-group">
            <label for="role">用户角色</label>
            <select id="role" name="role" class="form-control" required>
                <option value="1">普通用户</option>
                <option value="2">管理员</option>
            </select>
        </div>

        <button type="submit" class="btn">注册账号</button>
    </form>

    <div class="form-footer">
        已有账号？<a href="../login.jsp">立即登录</a>
    </div>
</div>

<script>
    // 获取密码和确认密码输入框
    const passwordInput = document.getElementById('password');
    const confirmPasswordInput = document.getElementById('confirmPassword');
    const messageDiv = document.getElementById('passwordMatchMessage');

    // 监听确认密码输入框的变化
    confirmPasswordInput.addEventListener('input', validatePasswordsOnInput);
    passwordInput.addEventListener('input', validatePasswordsOnInput);

    // 实时验证密码匹配
    function validatePasswordsOnInput() {
        const password = passwordInput.value;
        const confirmPassword = confirmPasswordInput.value;

        if (password === confirmPassword) {
            messageDiv.textContent = '密码匹配';
            messageDiv.className = 'password-match';
        } else if (confirmPassword !== '') {
            messageDiv.textContent = '两次输入的密码不一致';
            messageDiv.className = 'password-mismatch';
        } else {
            messageDiv.textContent = '';
        }
    }

    // 表单提交时验证
    function validatePasswords() {
        const password = passwordInput.value;
        const confirmPassword = confirmPasswordInput.value;

        if (password !== confirmPassword) {
            messageDiv.textContent = '两次输入的密码不一致';
            messageDiv.className = 'password-mismatch';
            confirmPasswordInput.focus();
            return false;
        }

        return true;
    }
</script>
</body>
</html>